<template>
    <section class="detail">
        <div class="content">
            <div v-if="detail.gif" class="gif-box" @click="loadGif">
                <img :src="gif === 0 ? detail.img : detail.gif" alt="{{detail.title}}"/>
                <div v-if="gif !== 2" :class="{'gif-loading': gif === 1}" class="gif-btn"></div>
                <div v-if="gif !== 2" class="gif-text"></div>
            </div>
            <img v-if="detail.img && !detail.gif" :src="detail.img" alt="{{detail.title}}"/>
            <h3 class="d-title">{{detail.title}}</h3>
            <p class="d-intro">{{detail.content}}</p>
        </div>
        <vote-view :aid="jid" :up="detail.good" :down="detail.bad"></vote-view>
        <div class="siblings" v-if="detail.lastId || detail.nextId">
            <a v-if="detail.lastId" class="prev" v-link="{name: 'detail', params: {id: detail.lastId, cid: cid, tid: tid}}">上一条</a>
            <a v-if="detail.nextId" class="next" v-link="{name: 'detail', params: {id: detail.nextId, cid: cid, tid: tid}}">下一条</a>
        </div>
    </section>
</template>

<script>
import VoteView from './VoteView.vue'

export default {
    name: 'ContentView',
    components: {
        VoteView
    },
    data (){
        return {
            gif: this.detail.loadStatus || 0
        }
    },
    props: {
        detail: {},
        jid: Number,
        cid: Number,
        tid: Number
    },
    route: {
        data () {
            console.log('change')
        }
    },
    methods: {
        loadGif: function (e) {
            if(this.gif === 0 && this.detail.gif){
                let img = new Image();
                img.src = this.detail.gif;
                img.onload = function () {
                    this.gif = 2;
                    this.detail.loadStatus = 2;
                    this.detail.img = this.detail.gif;
                }.bind(this);
                this.gif = 1;
            }
        }
    }
}
</script>

<style>
    .detail{
        margin-bottom: 8px;
        background-color: #fff;
    }

    .detail .content{
        padding-bottom: 40px;
    }

    .detail .d-title{
        padding: 5px 15px;
        font-size: 15px;
        font-weight: 600;
        line-height: 30px;
        color: #151515;
    }

    .detail .d-intro{
        padding: 0 15px;
        font-size: 13px;
        line-height: 24px;
        text-align: justify;
        color: #373737;
    }


    .siblings{
        display: -webkit-box;
        display: flex;
        height: 48px;
        font-size: 13px;
        line-height: 48px;
        text-align: center;
        color: #373737;
    }

    .siblings a{
        display: block;
        -webkit-box-flex: 1;
        flex: 1;
    }

</style>